<template>
  <div class="recom">
    <div class="recom-box1">
      <div class="head">{{ lang.my_reward }}</div>
      <div class="jump" v-click-move @click="handleDeposit">
        {{ lang.deposit }}
        <NuxtImg :src="assets.arrowRight" alt="arrow right" />
      </div>
    </div>
    <div class="recom-box2">
      <div class="fontBox">
        <span>{{ userStore.moneyUnit }} 0,00</span>
        <span>{{ lang.total_bonus }}</span>
      </div>
      <div class="fontBox">
        <span>0</span>
        <span>{{ lang.referred_users }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const lang: any = getCurrentPageLang("activity/agente");
const userStore = useUserStore();

const assets = {
  arrowRight: "/images/layout/icon-jtRight.png",
};

const handleDeposit = () => {
  userStore.changeShowCarteira(true, 2, 2);
};
</script>

<style scoped lang="scss">
.recom {
  --0b657e32: url("/images/user/account_bg_01.png");
  padding: 0.35rem 0.25rem;
  box-sizing: border-box;
  background: var(--0b657e32);
  background-repeat: no-repeat;
  background-size: 100% 100%;

  .recom-box1 {
    color: var(--theme-neutral1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;

    .head {
      display: flex;
      align-items: center;
      font-size: 0.44rem;
    }

    .jump {
      display: flex;
      align-items: center;
      font-size: 0.3rem;
      height: 0.6rem;
      padding: 0 0.25rem;
      background: var(--theme-neutral5);
      border-radius: 0.46rem;

      img {
        margin-left: 0.1rem;
        width: 0.3rem;
      }
    }
  }

  .recom-box2 {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    box-sizing: border-box;
    padding: 0 0.2rem;
    width: 100%;

    .fontBox {
      width: 50%;
      display: flex;
      flex-direction: column;
      margin-top: 0.2rem;

      span:nth-of-type(1) {
        font-size: 0.36rem;
        font-weight: 600;
        margin-bottom: 0.1rem;
        color: var(--theme-neutral1);
      }

      span:nth-of-type(2) {
        font-size: 0.28rem;
        font-weight: 100;
        color: var(--theme-neutral2);
      }
    }
  }
}
</style>
